// import React,{Component} from 'react';



// class Index extends Component {
  
//   state = {  }
//   render() { 
//     console.log(this)
//     return ( 
//       <div 
//       // onClick={this.onClick}
// // //this.props.history.push('/list', { id })
//       >
//         index

//         </div>
//     );
//   }
  
// }
 
// export default Index;
import React, { PureComponent } from 'react'

import { TabBar } from 'antd-mobile'

import home from 'images/tabbar/sy_tab@3x.png'
import homeSel from 'images/tabbar/sy_tab_s@3x.png'
import find from 'images/tabbar/fx_tab@3x.png'
import findSel from 'images/tabbar/fx_tab_s@3x.png'
import hall from 'images/tabbar/dt_tab@3x.png'
import hallSel from 'images/tabbar/dt_tab_s@3x.png'
import my from 'images/tabbar/wd_tab@3x.png'
import mySel from 'images/tabbar/wd_tab_s@3x.png'

import Home from '../home/Home'
import Find from '../find/Find'
import My from '../my/My'
import Hall from '../hall/Hall'

const tabList = [
  {
    title: '首页',
    key: 'home',
    icons: {
      icon: home,
      selectedIcon: homeSel
    },
    component: Home
  },
  {
    title: '发现',
    key: 'find',
    icons: {
      icon: find,
      selectedIcon: findSel
    },
    component: Find
  },
  {
    title: '大厅',
    key: 'hall',
    icons: {
      icon: hall,
      selectedIcon: hallSel
    },
    component: Hall
  },
  {
    title: '我的',
    key: 'my',
    icons: {
      icon: my,
      selectedIcon: mySel
    },
    component: My
  }
]

class Index extends PureComponent {
  constructor() {
    super()
    // 状态，和vuedata类似
    this.state = {
      selectedTab: 'hall',
      hidden: false,
      fullScreen: true,
    }
  }
  render() {
    return (
      <div style={this.state.fullScreen ? { position: 'fixed', height: '100%', width: '100%', top: 0 } : { height: 400 }}>
        <TabBar
          unselectedTintColor="#646464"
          tintColor="#56D9D1"
          barTintColor="white"
          hidden={this.state.hidden}
        >
          {
            // 循环创建TabBar
            tabList.map((value, index) => {
              return <TabBar.Item
                title={value.title}
                key={value.key}
                icon={<div style={{
                  width: '20px',
                  height: '20px',
                  background: `url(${value.icons.icon}) center center /  21px 21px no-repeat` }}
                />
                }
                selectedIcon={<div style={{
                  width: '20px',
                  height: '20px',
                  background: `url(${value.icons.selectedIcon}) center center /  21px 21px no-repeat` }}
                />
                }
                selected={this.state.selectedTab === value.key}
                onPress={() => {
                  this.setState({
                    selectedTab: value.key,
                  });
                }}
                data-seed="logId"
              >
                {/* 组件 */}
                {<value.component {...this.props}></value.component>}
              </TabBar.Item>
            })
          }
        </TabBar>
      </div>
    )
  }
}

export default Index
